<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <n-message-provider>
      <n-loading-bar-provider>
        <n-dialog-provider>
          <n-notification-provider>
            <div id="app" class="min-h-screen bg-tiktok-bg">
              <Navbar />
              <main class="pt-16">
                <router-view />
              </main>
            </div>
          </n-notification-provider>
        </n-dialog-provider>
      </n-loading-bar-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Navbar from '@/components/Navbar.vue'

// Naive UI 主题配置
const themeOverrides = computed(() => ({
  common: {
    primaryColor: '#FE2C55',
    primaryColorHover: '#8B5CF6',
    primaryColorPressed: '#25F4EE',
    primaryColorSuppl: '#FE2C55',
    infoColor: '#25F4EE',
    successColor: '#00D26A',
    warningColor: '#FF9500',
    errorColor: '#FF3040',
    textColorBase: '#FFFFFF',
    textColor1: '#FFFFFF',
    textColor2: '#CCCCCC',
    textColor3: '#999999',
    textColorDisabled: '#666666',
    placeholderColor: '#666666',
    iconColor: '#CCCCCC',
    iconColorHover: '#FFFFFF',
    iconColorPressed: '#FE2C55',
    dividerColor: '#333333',
    borderColor: '#333333',
    tableColor: '#161823',
    cardColor: '#161823',
    modalColor: '#161823',
    bodyColor: '#000000',
    tagColor: '#2F2F2F',
    avatarColor: '#2F2F2F',
    invertedColor: '#000000',
    inputColor: '#2F2F2F',
    codeColor: '#2F2F2F',
    tabColor: '#161823',
    actionColor: '#2F2F2F',
    tableHeaderColor: '#2F2F2F',
    hoverColor: 'rgba(254, 44, 85, 0.1)',
    pressedColor: 'rgba(139, 92, 246, 0.1)',
    opacityDisabled: '0.5',
    boxShadow1: '0 1px 2px -2px rgba(254, 44, 85, 0.08), 0 3px 6px 0 rgba(254, 44, 85, 0.06), 0 5px 12px 4px rgba(254, 44, 85, 0.04)',
    boxShadow2: '0 3px 6px -4px rgba(254, 44, 85, 0.12), 0 6px 16px 0 rgba(254, 44, 85, 0.08), 0 9px 28px 8px rgba(254, 44, 85, 0.05)',
    boxShadow3: '0 6px 16px -9px rgba(254, 44, 85, 0.08), 0 9px 28px 0 rgba(254, 44, 85, 0.05), 0 12px 48px 16px rgba(254, 44, 85, 0.03)'
  },
  Button: {
    textColor: '#FFFFFF',
    textColorHover: '#FFFFFF',
    textColorPressed: '#FFFFFF',
    textColorFocus: '#FFFFFF',
    textColorDisabled: '#666666',
    color: 'transparent',
    colorHover: 'transparent',
    colorPressed: 'transparent',
    colorFocus: 'transparent',
    colorDisabled: '#333333',
    border: '1px solid transparent',
    borderHover: '1px solid transparent',
    borderPressed: '1px solid transparent',
    borderFocus: '1px solid transparent',
    borderDisabled: '1px solid #333333',
    rippleColor: 'rgba(254, 44, 85, 0.3)',
    ghostColor: 'transparent',
    ghostColorHover: 'rgba(254, 44, 85, 0.1)',
    ghostColorPressed: 'rgba(139, 92, 246, 0.1)',
    ghostTextColor: '#FE2C55',
    ghostTextColorHover: '#8B5CF6',
    ghostTextColorPressed: '#25F4EE'
  },
  Card: {
    color: '#161823',
    colorModal: '#161823',
    colorTarget: '#2F2F2F',
    textColor: '#FFFFFF',
    titleTextColor: '#FFFFFF',
    borderColor: '#333333',
    actionColor: '#2F2F2F',
    borderRadius: '12px',
    paddingMedium: '24px',
    titleFontWeight: '600'
  }
}))
</script>

<style scoped>
#app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style>
